/**
 * @author wn
 * @date 2022/11/24 15:54:00
 * @description: 内网穿透  + 微信支付
 */

/*
  内网穿透   将本地 localhost:8080/index  转换为  URL/index
  供  公网  直接访问  本地 index

  使用  内网穿透工具  类似跨域
  用户 通过 url  访问 穿透工具  工具 访问 本地项目  打通连接

  1 NATAPP.cn
  登陆--购买隧道--免费隧道--隧道协议--Web--本地端口：8080--购买
  2 我的隧道--authtoken
  3 下载客户端--解压--cmd当前目录下 -- 指令
  4 natapp -authtoken=authtoken的值

  出现 映射 本地项目的  URL   取代 localhost:8080

  http://v53jnp.natappfree.cc

  5 vue.config.js -- 跳过检查host--这个是给webpack-dev-server开启可IP和域名访问权限-->QQ登陆 + 内网穿透

	devServer: { historyApiFallback: true, allowedHosts: 'all' }

  即可
*/

/*

微信支付

1 商户申请二维码贴纸  扫码输入金额 支付

2 PC网页集成 微信支付  native
生成  付款二维码  扫码直接支付    (二维码带价格)

后端 生成 微信返回的 response 中的  code_url

前端 A
将 URL 转换成 二维码 展示即可   或者 后端生成二维码  前端获取该二维码图片 展示
qrcodejs  二维码生成插件

支付结果通知    微信调用 后台接口  后台按照规范应答  或者 后台主动查询订单
对应 后端  Map 参数中 "notify_url":"供 微信调用的后台接口"

前端 B
支付完成  pay/callback  回调页展示   -- XXXX/#/pay/callback
后端使用  goEasy 推送 给前端      前端跳转  pay/callback      socket    发送 接收的  channel 名字 使用 唯一的 订单号

或者
前端 轮询 后端  得到 跳转 指令 后   前端跳转  pay/callback     http

成功需要跳转路由,失败需要提示支付失败,支付成功与失败,是后台返回的
            let timer = null
            if(timer) return
            timer = setInterval(async()=>{
            // 发请求获取用户支付状态
            let result = await API.reqPayStatus(orderId)
            // 如果code===200
            if(result.code===200){
              // 第一步:清除定时器
              clearInterval(timer)
              timer = null
              // 保存支付成功返回的code
              code.value = result.code
              // 关闭弹出框
              msgBox.close()
              // 跳转到下一路由 查询订单操作
              router.push('pay/callback')
            }
          },2000)
组件销毁  也要 清除定时器
    onBeforeUnmount(()=>{
      clearInterval(timer)
      timer = null
    })

3 手机端  微信扫一扫 前端页面 -- JSAPI 支付 点击          调用 微信支付框 支付    微信内支付
  微信内 支付 没有 openID  需要授权获取

  这个也分两种，1、跳转授权页
             2、静默授权，只获取code,后端凭借code换取openid，也称静默授权

  流程 1 看 URL是否有 code 没有需要 授权获取 重定向为当前页  重新获取 code  就可以拿到
      2 获取code
      3 调用 后台接口 传递 code  并且获取 调起支付的 参数

  // created阶段   微信内
let openId = null
const ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
  getCode()
}


  const GetUrlParam = code => {
  var reg = new RegExp('(^|&)' + code + '=([^&]*)(&|$)')
  let url = window.location.href.split("#")[0]
  let search = url.split('?')[1]
  if (search) {
    var r = search.substr(0).match(reg)
    if (r !== null) return unescape(r[2])
    return null
  } else {
    return null
  }
}
const getCode = () =>{
   // 服务号id
 const appid = 'XXX'
 const local = window.location.href
 // 截取路径中的 code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
 openId = GetUrlParam('code')

   if (openId == null || openId === '') {
    window.location.href =
      'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=#wechat_redirect'
  }
}
// 调用后台接口 传递 code + 其他参数   并且获取 调起支付的 参数
onClick-->doPay(payInfo)
parking

4 手机端  H5页面  手机端浏览器集成 微信支付 --H5 支付      调用 微信支付框 支付    微信外支付

           href   尽量用 replace
  location.replace('后端地址?  XXXXX' 最后拼接 redirect_url = encodeURIComponent("XXXX/callback")  需要回调地址 encodeURIComponent
  callback 页面  1 支付完成 2 支付取消 3 5秒不操作  都会跳转   所以此页面应该查询  订单状态 而不是直接显示成功

 查询订单操作    orderId    trade_state :SUCCESS

vue 哈希路由模式，微信回跳会把 # 后全部干掉，等于直回跳个域名,无法跳转  #/callback
解决方案: 可以自己拼接，把#省去，浏览器在访问时，会自动加上

5 手机端  公众号内(JS SDK)

支付宝支付

1 PC端   网页直接调起 支付宝支付
   同 QQ 登陆  AAAA-->127.0.0.1:8080
		const redirect = encodeURIComponent(
			'AAAA/pay/callback'
		)
    const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.orderId}&redirect=${redirect}`
    新开窗口   支付完后  跳转  AAAA/pay/callback
    const aliPay = () => {
			window.open(payUrl)
		}

2 PC端  二维码支付   同 微信  native 支付

3 手机端
类似 微信 内外  支付宝不区分
getApplyAliPay({
    // 传递的其它参数
    orderNumber: orderNumber,
    // 支付成功之后重定向的地址
    paySuccessUrl: 'xxx'
  }).then(res => {
    const div = document.createElement('div')
    div.id = 'aliPay'
    div.innerHTML = res
    document.body.appendChild(div)
    // 执行后会唤起支付宝
    document.querySelector('#aliPay').children[0].submit()
  })

paySuccessUrl  -- 查询订单操作

===================================

分享

vue-shares

https://cubic-bezier.com
================================================================
长轮询 和 短轮询是什么?
长轮询:    设置一分钟保持连接
http 长轮询是服务器 1s 查看是否有数据;有数据立刻响应请求;没有就等待 1s
重复 此操作  直到 1分钟结束     1分 与 1秒  可以设置

短轮询
http短轮询 是服务器收到请求不管是否有数据都直接响应 http 请求; 浏览器 重复发送 请求

两者相同点：
可以看出 http 长轮询和 http 短轮询的都会 hold 一段时间;
两者不同点
http 长轮询在服务端会 hold 一段时间, http 短轮询在浏览器端 hold一段时间;

=======================================================================






*/
